<template>
  <div class="app-container customer-div">
    <vxe-grid ref='customerListGrid' v-bind="gridOptions"  size="mini" :loading="listLoading">
      <template #form>
        <!--搜索-->
        <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
          <el-form-item label="客户编号：">
            <el-input v-model="listQuery.customerNumber"></el-input>
          </el-form-item>
          <el-form-item label="客户名称：">
            <el-input v-model="listQuery.customerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="复购率：">
            <el-select v-model="listQuery.repeatType" clearable multiple>
              <el-option v-for="item in repeatTypeList"  :key="item.value"  :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户性质：">
            <el-select v-model="listQuery.customerQuality" clearable>
              <el-option v-for="item in customerQualityList"  :key="item.cddId"  :value="item.cddId" :label="item.cddValue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户分类：" >
            <el-select v-model="listQuery.customerNewType" clearable multiple>
              <el-option
                v-for="item in customerTypeList"
                :key="item.cddValue"
                :label="item.cddValue"
                :value="item.cddValue">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="规模性质：">
            <el-select v-model="listQuery.newNature" >
              <el-option v-for="(item,index) in newNatureList" :key="index" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所在地区：">
            <el-select v-model="listQuery.areaId1" placeholder="请选择省" @change="changeAreaId1" style="width:120px" clearable>
              <el-option v-for="item in areaList"  :key="item.areaId" :label="item.areaName"  :value="item.areaId" ></el-option>
            </el-select>
            <el-select v-model="listQuery.areaId2" placeholder="请选择市" @change="changeAreaId2" v-if="listQuery.areaId1" style="width:120px" clearable>
              <el-option v-for="item in areaList[areaIndex1]['areaChildList']"  :key="item.areaId" :label="item.areaName"  :value="item.areaId"></el-option>
            </el-select>
            <el-select v-model="listQuery.areaId2" placeholder="请选择市" @change="changeAreaId2" v-else style="width:120px" clearable></el-select>
            <el-select v-model="listQuery.areaId3" placeholder="请选择区" style="width:120px" v-if="listQuery.areaId2" clearable>
              <el-option v-for="item in areaList[areaIndex1]['areaChildList'][areaIndex2]['areaChildList']"  :key="item.areaId" :label="item.areaName"  :value="item.areaId"></el-option>
            </el-select>
            <el-select v-model="listQuery.areaId3" placeholder="请选择区" v-else style="width:120px"></el-select>
          </el-form-item>
          <el-form-item label="品类：">
            <el-input v-model="listQuery.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="牌号：" >
            <el-select v-model="listQuery.kingGoodsId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="(item,index) in goodsList"
                :key="index"
                :label="item.goodsSn"
                :value="item.kingId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="未成交天数：">
            <el-input v-model="listQuery.unOrderDays" type="number" clearable style="width:150px;"></el-input><span style="padding-left:5px">天</span>
          </el-form-item>

          <el-form-item label="最近成交时间：">
            <el-date-picker
              v-model="listQuery.lastOrderTime"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="创建时间：">
            <el-date-picker
              v-model="listQuery.customerCreateTime"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="负责时间：">
            <el-date-picker
              v-model="listQuery.chargeStartTime"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="负责人：" v-if="listQuery.tab != 'my'">
            <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item>
            <el-button
              @click="handleSearchList()"
              type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #pager>
        <div style="overflow: hidden">
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
            </el-pagination>
          </div>
        </div>
      </template>


      <template #num1_default="{ row, rowIndex }">
        <el-link @click="toDetail(row)" type="primary" style="white-space: normal;">
          {{row.customerNumber}}
        </el-link>
        <!--是否有权限-->
        <div v-if="row.isShowCustomerName" style="white-space: normal;">{{row.customerName}}</div>
      </template>

      <template #num2_default="{ row, rowIndex }">
        {{row.parentCustomerName}}

      </template>

      <template #num5_default="{ row, rowIndex }">
        <span v-if="row.isNearPlanEnd==1" style="color: red;">{{ row.trackingNumPerMonth }}</span>
        <span v-else>{{ row.trackingNumPerMonth }}</span>
      </template>

      <template #aboutPerProfit_default="{ row, rowIndex }">
          <span :style="{'color':row.isSaleProfit == 1 ? 'red' :'#606266'}">{{row.aboutPerProfit}}</span>
      </template>

    </vxe-grid>


  </div>
</template>
<script>
import {
  getCustomerOption,orderGoodsList
} from '@/api/partner';
import {
  getCustomerInfoAPI,
  getRepeatList,
} from '@/api/company';
import {getConfigList,addZTradeTracking} from '@/api/partner'

import store from '@/store';
import "@/utils/jQuery.print";
import { mapGetters } from 'vuex';
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  tab: '',
  customerName:null,
  userId: null,
  unOrderDays:'',
  areaId1: '',//省ID
  areaId2: '',//市
  areaId3:'',//区
  customerCreateTime:[],//创建时间搜索
  chargeStartTime: [],//负责时间搜索
  customerQuality:'',//客户性质
  customerNumber: '',
  categoryName:'',
  kingGoodsId:'',
  customerNewType:[],
  newNature:'',
  repeatType:[]
};


export default {
  name: "repeatList",
  props: {

    areaList:{
      type: Array,
      default:()=>[]
    },

    userOptionList:{
      type: Array,
      default:()=>[]
    },
    customerQualityList: {
      type: Array,
      default:()=>[]
    },
    categoryList: {
      type: Array,
      default:()=>[]
    },
  },
  data() {

    return {
      areaIndex1:null,
      areaIndex2: null,
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      categoryLoading:false,
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],

      gridOptions:{
        border: true,
        id: 'repeatList',
        align: 'center',
        maxHeight:'900px',
        rowConfig: {
          keyField: 'dataId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,

          className:'mytoolbar',
        },
        columns: [

          {
            field: 'customerNumber',
            fixed:'left',
            title: '客户编号',
            width: 200,
            slots: {
              // 使用插槽模板渲染
              default: 'num1_default',
            }
          },
          {
            field: 'parentCustomerName',
            title: '主客户',
            width: 200,
            slots: {
              // 使用插槽模板渲染
              default: 'num2_default',
            }
          },
          {
            field: 'repeatType',
            title: '复购率',
            width: 130,
          },
          {
            field: 'customerNewType',
            title: '客户分类',
            width: 100,
          },

          {
            field: 'customerNature',
            title: '规模性质',
            width: 100,
          },
          {
            field: 'customerQuality',
            title: '客户性质',
            width: 100,
          },

          {
            field: 'userName',
            title: '客户负责人',
            width: 100,
          },
          {
            field: 'thisMonthInquiryCount',
            title: '本月询盘次数',
            width: 130,
          },

          {
            field: 'lastOrderTime',
            title: '最近成交时间',
            width: 130,
          },
          {
            field: 'unOrderDays',
            title: '未成交天数',
            width: 130,
          },
          {
            field: 'diffChargeDays',
            title: '持有天数',
            width: 110,
          },

        ],
        data:[],
      },
      goodsList:[],
      newScaleList:[],//客户规模
      newNatureList:[],//规模性质
      btnLoading2:false,
      cutItem:'',
      customerTypeList:[],
      repeatTypeList:[
        {value:'minOneMonth',name:'1个月以内复购客户'},
        {value:'oneMonthMore',name:'1~3个月复购客户'},
        {value:'threeMonthMore',name:'3~6个月复购客户'},
        {value:'sixMonthMore',name:'6~12个月复购客户'},
        {value:'oneYear',name:'1年只购买1次'},
        {value:'oneYearMore',name:'12个月内未购买客户'},
      ]
    }
  },

  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
  },
  filters: {
  },
  components : {

  },
  methods: {

    getgoodsList(){
      orderGoodsList().then((res)=>{
        this.goodsList = res.list
      })
    },
    //获取客户分类列表
    getCustomerType(){
      getConfigList({status:1}).then((res)=>{
        let customerType = res.find((el)=>{
          return  el.cdtCode == 'customer_new_type'
        })
        this.customerTypeList = customerType ? customerType.data : []
      })
    },

    // 获取客户信息配置
    getCustomerInfo() {
      getCustomerInfoAPI({tab: 1}).then((res) => {
        this.newScaleList = res;
      })
      getCustomerInfoAPI({tab: 2}).then((res) => {
        this.newNatureList = res;
      })
    },

    //切换省
    changeAreaId1(item) {
        this.areaIndex1 = this.areaList.findIndex((el)=>{
          return item == el.areaId
        });
        this.areaIndex2 = null;
        this.listQuery.areaId2 = '';
        this.listQuery.areaId3 = '';
    },
    //切换市
    changeAreaId2(item){
      this.areaIndex2 = this.areaList[this.areaIndex1]['areaChildList'].findIndex((el)=>{
        return item == el.areaId
      });
      this.listQuery.areaId3 = '';
    },

    init(tab) {
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tab = tab;
      this.tableData = [];
      this.count = 0;
      this.getList();
      this.getCustomerType()
      this.getCustomerInfo()
      this.getgoodsList()
    },


    //去客户详情页
    toDetail(item) {
      let routeData = this.$router.resolve({name:'customerDetail',query:{id:item.customerId}});
      window.open(routeData.href);
    },

    //客户名称输入匹配
    querySearch(queryString, cb){
      getCustomerOption({keywords:queryString}).then((res)=>{
        cb(res);
      })
    },

    //选择客户名称
    handleSelectCustomerName(item){
      this.listQuery.customerName = item.customerName
    },


    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      getRepeatList(this.listQuery).then(response => {
        this.gridOptions.data = response.list;
        this.count = response.count;
        this.num = response.num;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

  },
}
</script>
<style scoped lang="scss">
.pointerStyle:hover{
  cursor: pointer;
}
</style>



